<template>
  <div class="dcq-popup-select">
    <Search 
            v-model="searchText"
            show-action
            @cancel="onCancel"
            placeholder="请输入搜索关键词"
            @update:model-value	="onSearch"
          />
          <div class="select-item" v-if="searchList.length>0">
            <div class="item-total">搜索结果<span style="color: #07c160;">{{searchList.length}}</span>条</div>
            <div class="item" v-for="(item,index) in searchList" 
              :key="index" @click="btnRow(item)">
              <div class="name">  
                <Icon name="location-o" size="1rem" color="#07c160" /> 
                {{ item.name }}</div>
              <div class="address">{{ item.address }}</div>
              <Icon name="success" v-if="item.id==Id" class="right-view" size="1rem" color="#07c160" />
            </div>
        </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue"
import {Search,Icon} from 'vant';
import fetchJsonp from 'fetch-jsonp';
import { gcj02towgs84 } from '@/utils/wgs84ToGaode'
const emits = defineEmits(['onClick','onCancel'])
const searchList:any = ref([])
const searchText =ref('')
const Id:any =ref('')
const onSearch =(value:any)=>{
  fetchData(value)
}
const btnRow =(row:any)=>{
  Id.value = row.id
  emits('onClick',row)
}
const onCancel =()=>{
  emits('onCancel',true)
}
const fetchData = async (keyword:any) => {
const apiKey = 'SVHBZ-ILOW4-52DUC-KYSNX-NK2YF-TGFFQ';
const page =1;
const pageSize = 20;
const keywordSearch = encodeURIComponent(keyword);
const apiUrl = `https://apis.map.qq.com/ws/place/v1/suggestion?region=&keyword=${keywordSearch}&key=${apiKey}&output=jsonp&page_index=${page}&page_size=${pageSize}`;

try {
  const response = await fetchJsonp(apiUrl);
  const data = await response.json();
  if (data.status == 0) {
    const suggestions = data?.data?.map((suggestion:any) => ({
      id: suggestion.id,
      name: suggestion.title,
      address: suggestion.address,
      cityname: suggestion.city,
      adname: suggestion.adcode,
      location:gcj02towgs84(suggestion.location.lng,suggestion.location.lat).lat + ',' + gcj02towgs84(suggestion.location.lng,suggestion.location.lat).lng,
      latitude:gcj02towgs84(suggestion.location.lng,suggestion.location.lat).lat,
      longitude:gcj02towgs84(suggestion.location.lng,suggestion.location.lat).lng,
      photos: suggestion.photos || [],
      city: suggestion.city,
      district: suggestion.district,
      province: suggestion.province,
    }));
    searchList.value = suggestions;
  } 
 } catch (error) {
  } finally {
 }
};

</script>

<style lang="scss" scoped>
.select-item{
  padding:10px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  max-height:50vh;
  .item-total{
    font-size:15px;
  }
  .item{
    font-size:15px;
    padding:6px 0;
    border-bottom:1px solid #efefef;
    position: relative;
    .name{
      font-size:15px;
    }
    .address{
      font-size:13px;
    }
    .right-view{
      position: absolute;
      right:10px;
      top:20px;
    }
  }
  .item:last-child{
    border-bottom: none;
  }
}
</style>